<template>
  <div class="home">
    <homeHeader></homeHeader>
    <div id="bottom">
      <menuNav></menuNav>
      <main id="content">
        <!-- 顶部搜索 -->
        <table style="width: 100%;">
          <tr>
            <th>待结算金额 (元)</th>
            <th>已结算余额 (元)</th>
            <th>冻结金额 (元)</th>
            <th>已退款金额 (元)</th>

            <th>已提现金额 (元)</th>
            <th>提现中金额 (元)</th>
            <th>剩余可提现金额 (元)</th>
          </tr>
          <tr>
            <td>{{detail.s1||0}}</td>
            <td>{{detail.s2||0}}</td>
            <td>{{detail.s3||0}}</td>
            <td>{{detail.s4||0}}</td>
            <!-- 已提现金额 -->
            <!-- y已结算 - 以体现 体现中 -->
            <td>{{detail.withdrawMoney||0}}</td>
            <td>{{detail.withdrawIngMoney||0}}</td>
            <td>{{(detail.s2-detail.withdrawMoney-detail.withdrawIngMoney).toFixed(2)||0}}</td>
          </tr>
        </table>
        <div style=" width: 100%; display: flex; margin-top:20px">
          <!-- 左边选择信息 -->
          <div
            style="display: flex; align-items: center;justify-content: space-around;width: 100%; height:100px; background:#FFF;"
          >
            <div
              style="width: 85%; display: flex;align-items: center;justify-content: space-around;"
            >
              支付流水号:
              <el-input maxlength="13" v-model="input" style="width:200px" placeholder="请输入支付流水号"></el-input>支付方式:
              <el-select v-model="value" placeholder="请选择支付方式">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>选择日期:
              <div class="block">
                <el-date-picker
                  v-model="data1"
                  type="datetime"
                  placeholder="请选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>-
              <div class="block">
                <el-date-picker
                  v-model="data2"
                  type="datetime"
                  placeholder="请选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </div>
            </div>
            <el-button type="primary" style="height: 40px;" @click="upSearch">搜索</el-button>
          </div>
        </div>

        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="width:100%; ;margin-top: 20px;background-color:#fff;padding:10px"
        >
          <el-tab-pane label="全部" name="all">
            <listPage :listData="allArray"></listPage>
          </el-tab-pane>
          <el-tab-pane label="待结算(付款成功)" name="0">
            <listPage :listData="allArray"></listPage>
          </el-tab-pane>
          <el-tab-pane label="已结算(到商家)" name="1">
            <listPage :listData="allArray"></listPage>
          </el-tab-pane>
          <el-tab-pane label="退款中(冻结)" name="2">
            <listPage :listData="allArray"></listPage>
          </el-tab-pane>
          <el-tab-pane label="交易关闭(退款成功)" name="3">
            <listPage :listData="allArray"></listPage>
          </el-tab-pane>
        </el-tabs>
        <!-- 分页 -->
        <div style="width:90%;text-align: right;padding:5px 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
import menuNav from "../../components/MenuNav";
import homeHeader from "../../components/Header";
import listPage from "@/components/ListPage";
export default {
  name: "Home",
  components: {
    menuNav,
    homeHeader,
    listPage,
  },
  data() {
    return {
      detail: {},
      // 搜索框
      input: "",
      // 下拉菜单
      options: [
        {
          value: "微信",
          label: "微信",
        },
        {
          value: "支付宝",
          label: "支付宝",
        },
        {
          value: "银行卡",
          label: "银行卡",
        },
      ],
      value: "",
      // 状态下拉菜单
      sOptions: [
        {
          value: "0",
          label: "普通订单",
        },
        {
          value: "1",
          label: "分销订单",
        },
        {
          value: "2",
          label: "充值订单",
        },
      ],
      // value1: "",
      // 日期
      data1: "",
      data2: "",
      // 日期快捷键
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      // tab
      activeName: "all",
      allArray: [],

      // 分页
      currentPage4: 1,
      // 一页多少条数据
      pagesize: 10,
      total: 0,
    };
  },
  created() {
    this.$post("/cw/dyBillDetails/mchStatisticsInfoByMchId", {
      mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
    }).then((res) => {
      // console.log(res);
      if (res.data.code == 200) {
        this.detail = res.data.data;
      } else {
        this.detail = {};
      }
    });
    this.setData();
  },
  methods: {
    // tabBar
    handleClick(tab, event) {
      this.currentPage4 = 1;
      this.setData();
    },
    // 初始化
    setData() {
      if (this.activeName == "all") {
        this.$post("/cw/dyBillDetails/select", {
          pageNum: this.currentPage4,
          pageSize: 10,
          records: {
            billStatus: "",
            shopUserId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.allArray = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.allArray = [];
            this.total = 0;
          }
        });
      } else {
        this.$post("/cw/dyBillDetails/select", {
          pageNum: this.currentPage4,

          pageSize: 10,
          records: {
            billStatus: this.activeName,
            shopUserId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.allArray = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.allArray = [];
            this.total = 0;
          }
        });
      }
    },
    // 搜索按钮
    upSearch() {
      var pp = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
      if (pp.test(this.input)) {
        this.$message("搜索内容无效");
      } else {
        if (this.activeName == "all") {
          this.$post("/cw/dyBillDetails/select", {
            pageNum: this.currentPage4,
            pageSize: 10,
            records: {
              billStatus: "",
              tradeNo: this.input,
              payCahnnel: this.value,
              // billStatus: this.value1,
              createTime: this.data1,
              updateTime: this.data2,
              shopUserId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.allArray = res.data.data.records;
              this.total = res.data.data.total;
              console.log(this.allArray);
            } else {
              this.allArray = [];
              this.total = 0;
            }
          });
        } else {
          this.$post("/cw/dyBillDetails/select", {
            pageNum: this.currentPage4,
            pageSize: 10,
            records: {
              billStatus: this.activeName,
              tradeNo: this.input,
              payCahnnel: this.value,
              // billStatus: this.value1,
              createTime: this.data1,
              updateTime: this.data2,
              shopUserId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.allArray = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.allArray = [];
              this.total = 0;
            }
          });
        }
      }
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // 修改每一页的数据量
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 修改当前页
      this.currentPage4 = val;
      this.setData();
    },
  },
};
</script>
<style scoped>
th,
td {
  text-align: center;
  line-height: 50px;
}
.cell {
  overflow: hidden;
  white-space: nowrap;
}

.el-form-item {
  margin-top: -20px;
}

.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 60px;
}

.el-button-group {
  width: 300px;
  display: flex;
}

.el-dialog {
  position: relative;
  left: 300px;
  top: 100px;
}

.el-textarea__inner {
  height: 200px;
}
html,
body {
  height: 100%;
  margin: 0;
  font-size: 24px;
  color: #fff;
  font-family: "微软雅黑";
}

.div-box {
  position: relative;
  width: 320px;
  height: 100%;
  margin: 20px 0;
  margin-left: 120px;
  background: #87cefa;
  border: #ccc solid 5px;
}

#app {
  height: 100%;

  position: relative;
  color: #2c3e50;
  background-color: black;
}

.el-aside {
  color: white;
  height: 100%;
}

.el-header {
  background-color: black;
  color: white;
}

.el-main {
  background-color: white;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  background-color: black;
}
.el-table--border td,
.el-table--border th {
  padding: 2px;
}
.goLogin {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: red;
}
.el-table::before {
  height: 0px;
}
</style>